<template>
  <div class="orderDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">订单详情</x-header>
    <div class="topHolder"></div>
    <card>
      <div class="card-padding state" slot="content">
        <i class="iconfont" :class="[stateClass,stateTextClass]"></i>
        <br/>
        <span class="stateText">状态：<b :class="[stateTextClass]" v-text="stateText"></b></span>
      </div>
    </card>
    <group label-width="6em">
      <cell title="客户名称" :value="orderInfo.CUSTOMER_NAME"></cell>
      <cell title="所在房台号" :inline-desc="'低消：¥ ' + formatCurrency(orderInfo.minimumCharge) + ' 元'" :value="orderInfo.AREA + ' - ' + orderInfo.NUMBER + '（' + orderInfo.ROOM_PLATFORM_TYPE + '）'"></cell>
      <cell title="预订方式" v-if="orderInfo.SUBSCRIBE_MODE == 1" inline-desc="自助预订" :value="'（微信自助预订）'"></cell>
      <cell title="预订方式" v-else-if="orderInfo.SUBSCRIBE_MODE == 2" inline-desc="销售预订" :value="'（预订人：' + orderInfo.SUBSCRIBER + ' - ' + orderInfo.subscribe_DEPARTMENT + '）'"></cell>
      <cell title="预订方式" v-else-if="orderInfo.SUBSCRIBE_MODE == 3" inline-desc="老板预订" :value="'（预订人：老板 - ' + orderInfo.SUBSCRIBER + '）'"></cell>
      <cell title="预订方式" v-else-if="orderInfo.SUBSCRIBE_MODE == 4" inline-desc="股东预订" :value="'（预订人：股东 - ' + orderInfo.SUBSCRIBER + '）'"></cell>
      <cell title="预订方式" v-else="orderInfo.SUBSCRIBE_MODE == ''" inline-desc="非预订" :value="'（散客）'"></cell>
    </group>
    <card>
      <div class="card-padding" slot="content">
        <h2 class="payed">
          ¥ <span v-text="formatCurrency(orderInfo.payed)"></span> 元<br/>
          <small>实际已付金额</small>
        </h2>
        <grid :cols="2" style="text-align: center;">
          <grid-item label="账单总额">
            ¥ <span v-text="formatCurrency(orderInfo.total)"></span>元
          </grid-item>
          <grid-item label="待支付总额">
            ¥ <span v-text="formatCurrency(orderInfo.unpay)"></span>元
          </grid-item>
          <grid-item label="折扣优惠">
            ¥ <span v-text="formatCurrency(orderInfo.discount)"></span>元
          </grid-item>
          <grid-item label="赠送金额">
            ¥ <span v-text="formatCurrency(orderInfo.present)"></span>元
          </grid-item>
        </grid>
      </div>
    </card>
    <group title="账单明细">
      <cell-box v-for="(item,index) in orderInfo.goodDetails" :key="index" class="goodItem">
        <h5 class="title">
          <span class="name" v-text="item.NAME"></span><span>&nbsp;X&nbsp;</span><span v-text="item.QUANTITY"></span>
        </h5>
        <span class="originalPrice" :class="[{lineTrough:item.REAL_PRICE!=item.ORIGINAL_PRICE}]">¥ <span v-text="formatCurrency(item.ORIGINAL_PRICE)"></span>元</span>
        <div class="dateTime">
          下单时间：
          <span v-text="item.ORDER_DATETIME"></span>
        </div>
        <span class="realPrice" v-if="item.REAL_PRICE!=item.ORIGINAL_PRICE">¥ <span v-text="formatCurrency(item.REAL_PRICE)"></span>元</span>
        <div class="payMethod">
          支付方式：
          <span v-if="item.TYPE == 0 && item.ORDER_STATE == 0">待支付</span>
          <span v-if="item.TYPE == 0 && item.ORDER_STATE == 1" v-text="item.PAY_TYPE"></span>
          <span v-if="item.TYPE == 1">会员卡赠品</span>
          <span v-if="item.TYPE == 2">销售赠品</span>
          <span v-if="item.TYPE == 3">充公库存赠品</span>
          <span v-if="item.TYPE == 4">过期酒水赠品</span>
        </div>
        <span class="orderWay">
          <span v-if="item.TYPE == 0"><span v-text="item.ORDER_MAN"></span>（点）</span>
          <span v-if="item.TYPE == 1">会员卡赠送</span>
          <span v-if="item.TYPE == 2 || item.TYPE == 3 || item.TYPE == 4"><span v-text="item.ORDER_MAN"></span>(赠)</span>
        </span>
        <div class="memberCard" v-if="item.TYPE == 0 && item.ORDER_STATE == 1 && item.PAY_TYPE == 5">
          支付会员卡：<span v-text="item.MEMBERSHIP_CARD"></span>
        </div>
      </cell-box>
      <cell-box v-if="JSON.stringify(orderInfo) != '{}' && orderInfo.goodDetails.length <= 0">
        <div class="listNoItem">暂无账单明细</div>
      </cell-box>
    </group>
    <group label-width="4em">
      <cell title="订单单号" class="number notDotted" :value="orderInfo.ORDER_NUMBER"></cell>
      <cell title="开单时间" :value="orderInfo.ORDER_DATETIME"></cell>
      <cell title="操作人员" :value="'开单人：' + orderInfo.DRAWER + '（开台：' + orderInfo.open_OPERATOR + clearOperator + '）'" ></cell>
      <cell title="备注" :value="orderInfo.REMARK"></cell>
    </group>
  </div>
</template>

<script>
  import { Group, Cell, CellBox, Box, Card, Grid, GridItem, numberComma } from 'vux'
  import {getOrderDetail} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'orderDetail',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        paramOrderId:this.$route.params.orderId,
        loadingStatus:true,
        orderInfo:{},
        stateText:'',
        stateClass:'',
        stateTextClass:''
      }
    },
    components:{
      Group,
      Cell,
      CellBox,
      Box,
      Card,
      Grid,
      GridItem
    },
    computed:{
      clearOperator(){
        if(this.orderInfo.clear_OPERATOR && this.orderInfo.clear_OPERATOR != '') return '，清台：'+ this.orderInfo.clear_OPERATOR
        else return ''
      }
    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      getState(state){
        switch (state) {
          case 0:this.stateText = '未完成';this.stateClass = 'icon-xiaofei01';this.stateTextClass = 'processing';break
          case 1:this.stateText = '完成';this.stateClass = 'icon-chenggong1';this.stateTextClass = 'finish';break
          case 2:this.stateText = '取消';this.stateClass = 'icon-quxiao';this.stateTextClass = 'cancel';break
          case 4:this.stateText = '失败';this.stateClass = 'icon-shibai';this.stateTextClass = 'fail';break
          default:this.stateText = '无';this.stateClass = '';this.stateTextClass = '';break
        }
      }
    },
    mounted(){
      getOrderDetail(this.paramOrderId).then((res)=>{
        if(res.status == 'success'){
          this.orderInfo = res.data
          this.getState(res.data.ORDER_STATE)
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getOrderDetail error info:', res.msg)
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getOrderDetail catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .orderDetail{
    .state{
      text-align: center;
      .iconfont{
        font-size: 5rem;
        &.processing{color: #ffd428;}
        &.finish{color: #2775bd;}
        &.cancel{color: #bd2c00;}
        &.fail{color: #aaaaaa;}
      }
      .stateText{
        display:inline-block;margin-top: 1rem;
        b{
          &.processing{color: #ffd428;}
          &.finish{color: #2775bd;}
          &.cancel{color: #bd2c00;}
          &.fail{color: #aaaaaa;}
        }
      }
    }
    h2.payed{
      line-height: 1.8rem;color: #636363;font-size:2rem;text-align: center;margin: 1rem 0;
      small{font-size:1rem;color: #999999;}
    }
    .goodItem{
      display:block;border-bottom: 1px solid #eee;padding:1rem;position: relative;line-height: 1.5rem;font-size: 0.9rem;
      h5.title{
        display:inline-block;font-size: 1rem;color: #5f656c;height:1.3rem;width: 100% ;
        .name{max-width: 55%;display: block;float: left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
      }
      .originalPrice{
        position: absolute;right:1rem;top:1rem;
        &.lineTrough{text-decoration:line-through;}
      }
      .realPrice{position: absolute;right:1rem;top:2.5rem;color:red;}
      .orderWay{position: absolute;right:1rem;top:4rem;}
    }
  }
</style>
